<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .red{color: red;}

        .italic{font-style: italic;}

        .big{font-size: 20px;}

    </style>

</head>

<body>

    <div id="app">

        <!-- v-bind可以省写，如果类名是常量，必须另外加上单引号 -->

        <p :class="'red italic big'" :title="title">指令v-bind</p>

        <p :class="classString" :title="title">样式使用字符串形式</p>

        <p :class="classArray" :title="title">样式使用数组形式</p>

        <p :class="classObject" :title="title">对象绑定类名</p>

    </div>    

</body>

</html>

<script src="./vue.js"></script>

<script>

    new Vue({

        el:'#app',

        data(){

            return {

                className:'red',

                title:'测试',

                classString:'red italic big',

                classArray:['red','italic','big'],

                classObject:{'red':true,'italic':true}

            }

        }

    })

</script>